<template>
  <h2>App父级组件:Suspense组件的使用</h2>
  <suspense>
    <template #default>
      <AsyncComp />
    </template>
    <template #fallback>
      <h1>loading</h1>
    </template>
  </suspense>
</template>

<script lang="ts">
// Vue2中的动态引入组件的写法:(在Vue3中这种写法不行)
// const AsyncComp = () => import('./components/AsyncComp.vue')
import { defineComponent, defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(
  () => import('./components/AsyncComp.vue')
)
export default defineComponent({
  name: 'App',
  components: { AsyncComp },
  setup() {
    return {}
  }
})
</script>

<style scoped>
</style>